<!--
 * @Description: 历史监控 - 导出
 * @Author: 0001100986/LiuShuai
 * @Date: 2020-11-18 15:47:15
 * @LastEditTime: 2021-11-23 16:32:14
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="dialogbg" v-show="dialogHistory">
    <div class="dialogbox">
      <div class="boxmain">
        <div class="box-title">
          历史监控 - 导出
          <label @click="cancel">
            <i class="el-icon-close"></i>
          </label>
        </div>
        <div class="box-content">
          <el-date-picker
            v-model="dayTimes"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="options"
            style="width: 100%;"
          ></el-date-picker>
        </div>
        <div class="box-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="success" @click="submit">导出</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import { downloadMater } from '@/utils/download';
export default {
  name: 'history',
  props: ['lps', 'dialogHistory'],
  data () {
    return {
      dayTimes: [dayjs(dayjs().subtract(7, 'day').format('YYYY-MM-DD') + ' 00:00:00').format(), dayjs(dayjs().subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59').format()],
      // 可选时间范围
      options: {
        disabledDate (time) {
          // 昨天时间戳
          let end = dayjs(dayjs().subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59').valueOf();
          // 一个月
          let one = 30 * 24 * 3600 * 1000;
          // 昨天30天前时间戳
          let start = end - one;
          return time.getTime() < start || time.getTime() > end;
        }
      }
    };
  },
  mounted () {
    // 监听键盘按键事件
    let _this = this;
    _this.$nextTick(() => {
      document.addEventListener('keyup', (e) => {
        // 监听ESC按钮
        if (e.keyCode === 27) {
          _this.$emit('changeHistory', false);
        }
      });
    });
  },
  // 监听值
  watch: {
    // 弹出框表单参数赋值
    changeHistory (val) {
      let _this = this;
      if (val) {
        _this.dayTimes = [dayjs(dayjs().subtract(7, 'day').format('YYYY-MM-DD') + ' 00:00:00').format(), dayjs(dayjs().subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59').format()];
      }
    }
  },
  methods: {
    // 提交
    submit () {
      let _this = this;
      if (_this.dayTimes && _this.dayTimes.length === 2) {
        let { neId, name, link, port } = _this.lps;
        let params = {
          neId,
          name,
          link,
          port,
          dayTimes: this.dayTimes
        };
        _this.$http.post({
          url: '/api/sdwan/pm/pmHistory',
          data: params
        }).then(res => {
          let { status, resultBody } = res;
          if (status === '0') {
            let arry = [];
            resultBody.forEach(ele => {
              arry.push({
                'ID': ele.id,
                '名称': ele.name,
                '端口': ele.title,
                '类型': ele.type === 'port' ? '端口' : ele.type === 'dpi' ? '应用' : '隧道',
                '端口发送流量速率': ele.up + 'bps',
                '端口接收流量速率': ele.down + 'bps',
                '接收方向带宽利用率': ele.entry + '%',
                '发送方向带宽利用率': ele.out + '%',
                '隧道接收流量速率': ele.entryRate + 'bps',
                '隧道发送流量速率': ele.outRate + 'bps',
                '应用IPv4接收流量速率': ele.ipv4Down + 'bps',
                '应用IPv4发送流量速率': ele.ipv4Up + 'bps',
                '应用IPv6接收流量速率': ele.ipv6Down + 'bps',
                '应用IPv6发送流量速率': ele.ipv6Up + 'bps',
                '丢包率': ele.loss + '%',
                '时延': ele.latency + 'ms',
                '抖动': ele.jitter + 'ms',
                '时间': ele.time
              });
            });
            downloadMater(arry);
            _this.cancel();
            _this.$message.success('导出成功！');
          }
        });
      } else {
        _this.$message.error('请选择日期时间范围！');
      }
    },
    // 取消关闭
    cancel () {
      let _this = this;
      _this.$emit('changeHistory', false);
    }
  }
};
</script>
<style lang="scss" scoped>
// 历史监控 - 导出
.dialogbg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  z-index: 1010;
  overflow: auto;
  .dialogbox {
    width: 500px;
    margin: 0 auto;
    position: relative;
    outline: 0;
    top: 15%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    .boxmain {
      -webkit-overflow-scrolling: touch;
      top: 150px;
      left: 0;
      margin: 0;
      padding: 0;
      background-color: #fff;
      -webkit-background-clip: content;
      border-radius: 2px;
      box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
      .box-title {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        line-height: 24px;
        font-size: 18px;
        color: #303133;
        overflow: hidden;
        background-color: #fff;
        border-radius: 5px 5px 0 0;
        label {
          display: inline-block;
          font-size: 16px;
          position: absolute;
          top: 16px;
          right: 20px;
          i {
            cursor: pointer;
          }
          &:hover {
            color: #409eff;
          }
        }
      }
      .box-content {
        padding: 20px;
        line-height: 24px;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .box-footer {
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
@media screen and (max-width: $device-ipad) {
  .dialogbg {
    .dialogbox {
      width: auto;
      margin: 0 5%;
    }
  }
}
</style>